<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#text").blur(function () {
                //        创建正则规则
                var reg = /^\d{6,20}$/
                var con = $(this).val();

                //    用正则取匹配内容
                var result = reg.test(con);
                if (result) {
                    layer.tips('用户名符合规范', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                } else {
                    layer.tips('用户名必须为6-20位的数字', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                }
            })

        });
    </script>
</head>
<body>
<h1>鼠标出发一下单行文本的失去焦点事件试试</h1>
用户名:<input type="text" class="btn" id="text" value="">

<br><br>
<textarea name="tt" id="tt" cols="30" rows="10"></textarea>
</body>
